
import React, {Fragment} from "react";
import {Alert, Checkbox} from "antd";
import Store from "./Store";
import {observer} from "mobx-react";

const plainOptions = ['搜索','新建', '查看', '编辑','删除','批量删除','批量导入','批量导出'];

@observer
class SelectActions extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            indeterminate: true,
            checkAll: false,
        }
    }

    onCheckChange = checkedList => {
        Store.checkedList = checkedList;
        this.setState({
            indeterminate: !!checkedList.length && checkedList.length < plainOptions.length,
            checkAll: checkedList.length === plainOptions.length,
        });
    };

    onCheckAllChange = e => {
        Store.checkedList = e.target.checked ? plainOptions : [];
        this.setState({
            indeterminate: false,
            checkAll: e.target.checked,
        });
    };

    render() {
        const CheckboxGroup = Checkbox.Group;
        return (
            <Fragment>
                <Alert closable showIcon type={"info"} message={"小提示"}
                       style={{width: 750,marginBottom:"10px", color: '#31708f !important'}}
                       description={"选择页面的功能"}
                />
                <div>
                    <Checkbox
                        indeterminate={this.state.indeterminate}
                        onChange={this.onCheckAllChange}
                        checked={this.state.checkAll}
                    >
                        全选
                    </Checkbox>
                </div>
                <br />
                <CheckboxGroup
                    options={plainOptions}
                    value={Store.checkedList}
                    onChange={this.onCheckChange}
                />
            </Fragment>
        );
    }
}

export default SelectActions;
